<%@page import="com.scrum.Object.Comment"%>
<%@page import="com.scrum.Object.User"%>
<%@page import="com.scrum.Object.Post"%>
<%@page import="java.util.Vector"%>
<%@page import="java.sql.SQLException"%>
<%@page import="com.scrum.Connection.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!-- Le styles -->
<link href="../css/bootstrap-theme.min.css" rel="stylesheet"
	type="text/css" />
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/post_style.css" rel="stylesheet" type="text/css" />
<link href="../css/font_face.css" rel="stylesheet" type="text/css" />
<link href="../css/tsc_comment_boxes.css" rel="stylesheet" type="text/css" />
<link href="../css/detail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/ckeditor.js"></script>


<!-- Fav and touch icons -->
<link rel="shortcut icon" href="assets/img/favicon.png">

</head>
<body>
	<!-- NAVBAR
    ================================================== -->
	<div class="navbar-wrapper">
		<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
		<!-- <div class="container"> -->

		<!-- <a class="brand" href="#"><img src="assets/img/logo.png" width='80px' height='75px'></a> -->
		<div class="navbar navbar-default navbar-static-top">
			<div class="navbar-inner-top">
				<div class="container">
					<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
					<button type="button" class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse">
						<span class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
					<a class="brand" href="#"><img src="assets/img/logo.png"
						width='115px' height='115px' /></a>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<!-- <li class="active"><a href="#">Home</a></li> -->
							<!-- Read about Bootstrap dropdowns at http://twbs.github.com/bootstrap/javascript.html#dropdowns -->
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown">Đà Nẵng <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="#">Hà Nội</a></li>
									<li><a href="#">Hải Phòng</a></li>
									<li class="divider"></li>
									<!-- <li class="nav-header">Nav header</li> -->
									<li><a href="#">Huế</a></li>
									<li><a href="#">Đà Nẵng</a></li>
									<li class="divider"></li>
									<li><a href="#">TP. Hồ Chí Minh</a></li>
									<li><a href="#">Cần Thơ</a></li>
								</ul></li>
						</ul>
						<ul class="nav pull-right" style="left: 0;">
							<li><a href="#login" data-toggle="modal"
								data-target="#register">Register</a></li>

							<li><a href="#login" data-toggle="modal"
								data-target="#myDetail">Login</a></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
			</div>
			<!-- /.navbar-inner -->
		</div>
		<!-- /.navbar -->

		<!-- </div> /.container -->
		<div class="navbar navbar-default navbar-static-top">
			<div class="navbar-inner">
				<div class="container">
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li class="current"><a href="#restaurants">Foods</a></li>
							<li><a href="#recipes">Rests</a></li>
							<li><a href="#about">Entertainments</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /.navbar-wrapper -->
	<div class="modal fade" id="myDetail">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">Sign in website</h4>
				</div>
				<div class="modal-body">
					<form class="form-signin">
						<h5 class="form-signin-heading">
							Please type your email and password
							</h2>
							<label>Email address</label> <input type="text"
								class="form-control" placeholder="abc" required=""
								autofocus="true" /> <input type="text" class="form-control"
								placeholder="gmail.com" required="" autofocus="true" /> <label>Password</label>
							<input type="password" class="form-control"
								placeholder="Password" required="" /> <label class="checkbox">
								<input type="checkbox" value="remember-me" /> Remember me
							</label>
							<hr />
							If you don'thave any account, please <a href="#">Register</a>
					</form>
					<hr />
					Login with <img src="photos/facebook.jpg" height="40px"
						width="40px" /> <img src="photos/google.jpg" height="40px"
						width="40px" /> <img src="photos/yahoo.png" height="40px"
						width="40px" />

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal">Login</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->




	<!-- Carousel
    ================================================== -->
	<div id="myCarousel" class="carousel slide" href="#">
		<div class="carousel-inner">
			<div class="item">
				<img src="photos/index/slide-01.jpg" alt="">
				<div class="container">
					<div class="carousel-caption">
						<h1>Phở bò</h1>
						<p class="lead">Cras justo odio, dapibus ac facilisis in,
							egestas eget quam. Donec id elit non mi porta gravida at eget
							metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						<!-- <a class="btn btn-large btn-primary" href="#">Sign up today</a> -->
					</div>
				</div>
			</div>
			<div class="item active" href="#">
				<img src="photos/index/slide-02.jpg" alt="">
				<div class="container">
					<div class="carousel-caption">
						<h1>Mì quảng</h1>
						<p class="lead">Cras justo odio, dapibus ac facilisis in,
							egestas eget quam. Donec id elit non mi porta gravida at eget
							metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						<!-- <a class="btn btn-large btn-primary" href="#">Learn more</a> -->
					</div>
				</div>
			</div>
			<div class="item">
				<img src="photos/index/slide-03.jpg" alt="">
				<div class="container">
					<div class="carousel-caption">
						<h1>Mì ý</h1>
						<p class="lead">Cras justo odio, dapibus ac facilisis in,
							egestas eget quam. Donec id elit non mi porta gravida at eget
							metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						<!-- <a class="btn btn-large btn-primary" href="#">Browse gallery</a> -->
					</div>
				</div>
			</div>
		</div>
		<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
		<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
	</div>
	<!-- Search bar
      ================================================== -->
	<div class="search-bar-big">
		<div class='search-bar-big-background'></div>
		<div class='search-bar-big-container'>
			<label class='search-bar-big-label'>Search food places</label> <input
				type="text" id='search-bar-big-textfield'
				placeholder="Search by restaurant name, locality, cuisine or dish">
			<!-- <button class="btn btn-large btn-primary"><i class="icon-search icon-white"></i></button> -->
			<a href="#"><img src="assets/img/icon-search.png"
				class="btn-search-big"></a>
		</div>
	</div>

	<!-- Thumbnail top restaurants
      ================================================== -->
	<%
		String id = request.getParameter("postid");
		int post_id = Integer.parseInt(id);
		Post post = Post.getPostById(post_id);
		String filePath = "../post/image/" + post.getImage();
	%>
	<div class="content detail">
		<h1>
			<font color="white"> <%=post.getTitle()%>
			</font>
		</h1>
		<div class="date"><%=post.getPost_time().toString()%></div>
		<div class="text">

			<p>
				<font color="white"><%= post.getDescription() %>
				</font>
			</p>


			<p class="img-post">
				<img src="<%=filePath%>" style="width: 200px; height: 200px;"alt="">
			</p>
			<p align="center"></p>
			<br />
			<p>
				<i> <%= User.getUserById(post.getUser_id()).getUsername() %> </i>
			</p>
		</div>

	</div>
	<br>
	<br>
	<br>
	<div class="nav nav-primary">
	<hr>
	<ul>
		<div class="tab-conversation active"><a href="#"
			data-role="post-count" class="publisher-nav-color"
			data-nav="conversation"><span class="comment-count"> <%= Comment.getcountComments(post_id) %>
					Comments </span> <span class="comment-count-placeholder"> Comment
					</span> </a></div>
					
		<%
		Vector<Comment> commentarray = Comment.getAllCommentByPostId(post_id);
		
			String uri = request.getScheme() + "://" + // "http" + "://
				request.getServerName() + // "myhost"
				":" + // ":"
				request.getServerPort() + // "8080"
				request.getRequestURI() + // "/people"
				"?" + // "?"
				request.getQueryString(); // "lastname=Fox&age=30"
				
	%>
	
	
	<div slyle="width: 1000px; margin: 0 auto; background: blue;">
		<div id="fb-root"></div>
		<script>
		
			(function(d, s, id) {
				var js, fjs = d.getElementsByTagName(s)[0];
				if (d.getElementById(id))
					return;
				js = d.createElement(s);
				js.id = id;
				js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.0";
				fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		</script>

		<div class="fb-share-button" data-href="<%=uri%>"></div>
	</div>
		
		<table class="commentarray">
		<%
		for (int i = 0; i < commentarray.size(); i++){
			Comment comment = commentarray.get(i);
			User user = User.getUserById(comment.getUser_id());
			String userPath = "../user/image/" + user.getImage();
		
		%>
		
		<tr>
				<td>
				<img alt="" src="<%= userPath %>" style="width: 55px; height: 55px;"/></td>
				<td><%= comment.getComment() %></td>
				</tr>
			<%
			}%>
		</table>
		<div class="tab-community"><a href="#" class="publisher-nav-color"
			data-nav="community" id="community-tab"> <span
				class="community-name"> <strong>Món ăn Đà Nẵng</strong>

			</span> <strong class="community-name-placeholder">Cộng đồng</strong>
		</a><div>
		<div class="dropdown user-menu" data-role="logout"><a href="#"
			class="dropdown-toggle" data-toggle="dropdown"> <span
				class="dropdown-toggle-wrapper"> <span> Đăng nhập </span>

			</span> <span class="caret"></span>
		</a>
		</div>
		<div class="notification-menu" data-role="notification-menu"><a
			href="#" class="notification-container" data-nav="dashboard"> <span
				class="notification-icon icon-comment"></span> <span
				class="notification-count" data-role="notification-count"></span>
		</a></div>
	</ul>
	
	</div>
	<%
	 int user_id = ((User)session.getAttribute("currentuser")).getId();
	User user = User.getUserById(user_id);
	String currentuserPath = "../user/image/" + user.getImage();
	
	%>
	<input type="hidden" value="<%= currentuserPath %>" id="userpath"/>
	<!-- DC Comment Boxes Start -->
	<div class="tsc_clean_comment">
		<div class="avatar_box">
			<img src="<%= currentuserPath %>" alt="Avatar" class="avatar"  style="width: 55px; height: 55px;"/>
			<p class="username"><%= user.getUsername() %></p>
		</div>
		<div class="comment_box fr">
			<p class="comment_paragraph" contenteditable="true" id="comment"></p>
		</div>
		<div class="tsc_clear"></div>
	</div>
	<!-- DC Comment Boxes End -->
	<button value="comment" id="add_cm_btn" class="btn btn-primary">Send</button>

	<input type="hidden" value="<%=post_id%>" id="postid" />




	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.js"></script>
	<script src="assets/js/main.js"></script>
	<script>
	$(document).ready(function(){
		$("#add_cm_btn").click(function(){
			var data = {"comment": $("#comment").text()};
			console.log(data);
			 $.ajax({
	        		type:"POST",
	        		url : "/Travelholic/add_comment?postid="+$("#postid").val(),
	        		dataType: "json",
	        		data : data,
	        		success : function(){
	        			console.log("comment");
					},
					error : function() {
										$(".commentarray").append("<tr><td><img src='" + $("#userpath").val() + "' style='width: 55px; height: 55px;'/></td> <td>" + $("#comment").text() + "</td></tr>");
									}
								});
							});
				});
	</script>
	<script src="assets/js/holder.js"></script>

</body>
</html>